<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>系统管理</title>
    <!-- Bootstrap 5.3.3 CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <!-- Bootstrap Icons -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
    />
    <style>
      .search-card {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        margin-bottom: 20px;
        border: none;
      }

      .data-card {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        border: none;
      }

      .user-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        object-fit: cover;
      }

      .action-btn {
        padding: 3px 8px;
        font-size: 0.875rem;
      }

      .status-badge {
        padding: 3px 8px;
        font-size: 0.8125rem;
      }

      .role-tag {
        padding: 3px 8px;
        font-size: 0.8125rem;
        background-color: #f8f9fa;
        border: 1px solid #dee2e6;
      }

      .search-row {
        margin-bottom: 15px;
      }

      .action-row {
        margin-bottom: 15px;
      }

      .table th {
        font-weight: 500;
        color: #555;
        background-color: #f8f9fa;
      }

      .table td {
        vertical-align: middle;
      }

      .pagination-sm .page-link {
        font-size: 0.875rem;
      }
    </style>
  </head>
  <body>
    <div class="container-fluid p-4">
      <!-- 搜索条件 -->
      <div class="card search-card">
        <div class="card-body p-3">
          <div class="row search-row g-3">
            <div class="col-md-3">
              <input
                type="text"
                class="form-control form-control-sm"
                placeholder="用户ID"
              />
            </div>
            <div class="col-md-3">
              <input
                type="text"
                class="form-control form-control-sm"
                placeholder="用户名"
              />
            </div>
            <div class="col-md-3">
              <select class="form-select form-select-sm">
                <option value="">全部角色</option>
                <option value="1">管理员</option>
                <option value="2">编辑</option>
                <option value="3">用户</option>
                <option value="4">访客</option>
              </select>
            </div>
            <div class="col-md-3 d-flex">
              <button class="btn btn-sm btn-primary me-2">
                <i class="bi bi-search me-1"></i>搜索
              </button>
              <button class="btn btn-sm btn-outline-secondary">
                <i class="bi bi-arrow-counterclockwise me-1"></i>重置
              </button>
            </div>
          </div>

          <!-- 操作按钮行 -->
          <div class="row action-row g-3">
            <div class="col-md-12 d-flex">
              <button class="btn btn-sm btn-primary me-2">
                <i class="bi bi-plus-lg me-1"></i>新增
              </button>
              <button
                id="batchDeleteBtn"
                class="btn btn-sm btn-outline-danger"
                disabled
              >
                <i class="bi bi-trash me-1"></i>批量删除
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 数据表格 -->
      <div class="card data-card">
        <div class="card-body p-0">
          <div class="table-responsive">
            <table class="table table-hover mb-0">
              <thead>
                <tr>
                  <th width="40">
                    <div class="form-check">
                      <input
                        class="form-check-input"
                        type="checkbox"
                        id="selectAll"
                      />
                    </div>
                  </th>
                  <th>ID</th>
                  <th>用户名</th>
                  <th>姓名</th>
                  <th>角色</th>
                  <th>手机</th>
                  <th>注册时间</th>
                  <th>状态</th>
                  <th width="170">操作</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>
                    <div class="form-check">
                      <input
                        class="form-check-input row-checkbox"
                        type="checkbox"
                        value="1"
                      />
                    </div>
                  </td>
                  <td>1001</td>
                  <td>zhangwei</td>
                  <td>张伟</td>
                  <td><span class="role-tag">管理员</span></td>
                  <td>13800138000</td>
                  <td>2023-01-15</td>
                  <td>
                    <span class="badge bg-success status-badge">启用</span>
                  </td>
                  <td>
                    <button
                      class="btn btn-sm action-btn btn-outline-primary me-1"
                    >
                      <i class="bi bi-pencil me-1"></i>编辑
                    </button>
                    <button class="btn btn-sm action-btn btn-outline-danger">
                      <i class="bi bi-trash me-1"></i>删除
                    </button>
                  </td>
                </tr>
                <tr>
                  <td>
                    <div class="form-check">
                      <input
                        class="form-check-input row-checkbox"
                        type="checkbox"
                        value="2"
                      />
                    </div>
                  </td>
                  <td>1002</td>
                  <td>lina</td>
                  <td>李娜</td>
                  <td><span class="role-tag">编辑</span></td>
                  <td>13900139000</td>
                  <td>2023-02-20</td>
                  <td>
                    <span class="badge bg-success status-badge">启用</span>
                  </td>
                  <td>
                    <button
                      class="btn btn-sm action-btn btn-outline-primary me-1"
                    >
                      <i class="bi bi-pencil me-1"></i>编辑
                    </button>
                    <button class="btn btn-sm action-btn btn-outline-danger">
                      <i class="bi bi-trash me-1"></i>删除
                    </button>
                  </td>
                </tr>
                <tr>
                  <td>
                    <div class="form-check">
                      <input
                        class="form-check-input row-checkbox"
                        type="checkbox"
                        value="3"
                      />
                    </div>
                  </td>
                  <td>1003</td>
                  <td>wangfang</td>
                  <td>王芳</td>
                  <td><span class="role-tag">用户</span></td>
                  <td>13700137000</td>
                  <td>2023-03-05</td>
                  <td>
                    <span class="badge bg-success status-badge">启用</span>
                  </td>
                  <td>
                    <button
                      class="btn btn-sm action-btn btn-outline-primary me-1"
                    >
                      <i class="bi bi-pencil me-1"></i>编辑
                    </button>
                    <button class="btn btn-sm action-btn btn-outline-danger">
                      <i class="bi bi-trash me-1"></i>删除
                    </button>
                  </td>
                </tr>
                <tr>
                  <td>
                    <div class="form-check">
                      <input
                        class="form-check-input row-checkbox"
                        type="checkbox"
                        value="4"
                      />
                    </div>
                  </td>
                  <td>1004</td>
                  <td>zhaoqiang</td>
                  <td>赵强</td>
                  <td><span class="role-tag">访客</span></td>
                  <td>13600136000</td>
                  <td>2023-04-10</td>
                  <td>
                    <span class="badge bg-danger status-badge">禁用</span>
                  </td>
                  <td>
                    <button
                      class="btn btn-sm action-btn btn-outline-primary me-1"
                    >
                      <i class="bi bi-pencil me-1"></i>编辑
                    </button>
                    <button class="btn btn-sm action-btn btn-outline-danger">
                      <i class="bi bi-trash me-1"></i>删除
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

          <!-- 分页 -->
          <div
            class="d-flex justify-content-between align-items-center p-3 border-top"
          >
            <div class="text-muted small">
              显示 <span class="fw-medium">1</span> 到
              <span class="fw-medium">4</span> 条，共
              <span class="fw-medium">25</span> 条
            </div>
            <nav aria-label="Page navigation">
              <ul class="pagination pagination-sm mb-0">
                <li class="page-item disabled">
                  <a class="page-link" href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                  </a>
                </li>
                <li class="page-item active">
                  <a class="page-link" href="#">1</a>
                </li>
                <li class="page-item"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item">
                  <a class="page-link" href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                  </a>
                </li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </div>

    <!-- Bootstrap 5.3.3 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

    <script>
      // 页面交互逻辑
      document.addEventListener("DOMContentLoaded", function () {
        // 全选/取消全选
        document
          .getElementById("selectAll")
          .addEventListener("change", function () {
            const checkboxes = document.querySelectorAll(".row-checkbox");
            checkboxes.forEach((checkbox) => {
              checkbox.checked = this.checked;
            });
            updateSelectedCount();
          });

        // 行选择框变化时更新计数
        document.querySelectorAll(".row-checkbox").forEach((checkbox) => {
          checkbox.addEventListener("change", updateSelectedCount);
        });

        // 更新选中计数
        function updateSelectedCount() {
          const selectedCount = document.querySelectorAll(
            ".row-checkbox:checked"
          ).length;
          document.getElementById("batchDeleteBtn").disabled =
            selectedCount === 0;
        }
      });
    </script>
  </body>
</html>
